<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { useRouter } from '@/router';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { OrderRefundDetails } from '@/types/carOrder';
import { applyRefundDetail, refundOrder } from '@/api/car';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const from = ref('orderDetail');
const orderIndex = ref(-1);
const orderSn = ref('');
const refundInfo = ref<OrderRefundDetails>();
const reason = ref('');

async function getRefundInfo() {
  const res = await applyRefundDetail(orderSn.value);
  if (res.code == 0) {
    refundInfo.value = res.data;
  } else {
    uni.navigateBack();
  }
}

function copyOrderNo() {
  uni.setClipboardData({
    data: refundInfo.value!.orderSn,
    success: function () {
      uni.showToast({
        title: 'success',
        icon: 'none'
      });
    }
  });
}

async function submitRefund() {
  const res = await refundOrder(orderSn.value, reason.value);
  if (res.code == 0) {
    if (from.value == 'tripList') {
      let pages = getCurrentPages();
      let currentPage = pages[pages.length - 2];
      currentPage.$vm.handleRefresh();
    }
    uni.navigateBack();
  } else {
    uni.showToast({
      title: res.message,
      icon: 'none'
    });
    return;
  }
}

onLoad(async (options) => {
  orderSn.value = options!.orderSn;
  from.value = options!.from;
  orderIndex.value = options!.orderIndex;

  await getRefundInfo();
});
</script>

<template>
  <view class="order-refund-contain">
    <uni-nav-bar
      v-if="isWechat()"
      :border="false"
      :title="t('LOKey_cancelRequest')"
      fixed
      left-icon="left"
      status-bar
      @click-left="router.back"
    />
    <view class="order-refund-contain-content">
      <view class="order-refund-contain-content-info">
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">{{ t('LRKey_orderNo') }}</view>
          <view class="order-refund-contain-content-info-item-t2">
            {{ refundInfo?.orderSn }}
            <text @click="copyOrderNo">{{ t('LRKey_copy') }}</text>
          </view>
        </view>
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">{{ t('LOKey_orderTime') }}</view>
          <view class="order-refund-contain-content-info-item-t2">
            {{ refundInfo?.orderCreateAt }}
          </view>
        </view>
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">
            {{ t('LOKey_orderCancelFee') }}
          </view>
          <view class="order-refund-contain-content-info-item-t2 red bold">
            {{
              t('LPKey_moneyX', {
                money: refundInfo?.cancelFee ? parseFloat(refundInfo?.cancelFee) : 0
              })
            }}
          </view>
        </view>
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">
            {{ t('LOKey_orderRefundAmount') }}
          </view>
          <view class="order-refund-contain-content-info-item-t2 red bold">
            {{
              t('LPKey_moneyX', { money: refundInfo?.refundAmount ? refundInfo?.refundAmount : 0 })
            }}
          </view>
        </view>
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">
            {{ t('LOKey_orderRefundScore') }}
          </view>
          <view class="order-refund-contain-content-info-item-t2 red bold">
            {{ refundInfo?.refundBalance ? parseFloat(refundInfo?.refundBalance) : 0 }}
          </view>
        </view>
        <view class="order-refund-contain-content-info-item">
          <view class="order-refund-contain-content-info-item-t1">
            {{ t('LOKey_orderRefundWay') }}
          </view>
          <view class="order-refund-contain-content-info-item-t2">
            {{ t('LOKey_orderRefundWayOriginal') }}
          </view>
        </view>
      </view>
      <view class="order-refund-contain-content-reason">
        <view class="order-refund-contain-content-reason-title">
          {{ t('TransfeCancelReason') }}
        </view>
        <view class="order-refund-contain-content-reason-textarea">
          <textarea
            v-model="reason"
            :placeholder="t('TransfeEnterCancelReason')"
            auto-height
            placeholder-class="checkout-remark-placeholder"
          />
        </view>
      </view>
    </view>

    <view class="order-refund-contain-bottom">
      <view class="order-refund-contain-bottom-l">
        <text>{{ t('LOKey_orderRefundAmountShould') }}</text>
        {{ t('LPKey_moneyX', { money: refundInfo?.refundAmount ? refundInfo?.refundAmount : 0 }) }}
      </view>
      <view class="order-refund-contain-bottom-r">
        <view @click="submitRefund">{{ t('LOKey_orderRefundNow') }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.order-refund-contain {
  padding-bottom: 204rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 204rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 204rpx);

  &-content {
    padding-top: 24rpx;

    &-info {
      margin: 0 24rpx 24rpx;
      background: #ffffff;
      border-radius: 20rpx;
      padding: 32rpx 32rpx 24rpx;

      &-item {
        display: flex;
        align-items: center;

        &-t1 {
          width: 212rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #adaeb0;
          line-height: 80rpx;
        }

        &-t2 {
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 80rpx;
          display: flex;
          align-items: center;

          &.red {
            color: #d13820;
          }

          &.bold {
            font-weight: 500;
          }

          text {
            font-weight: 400;
            font-size: 24rpx;
            color: #006ff6;
            line-height: 48rpx;
            margin-left: 20rpx;
          }
        }
      }
    }

    &-reason {
      margin: 0 24rpx 24rpx;
      background: #ffffff;
      border-radius: 20rpx;
      padding: 40rpx 0;

      &-title {
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 36rpx;
        color: #3d3d3d;
        line-height: 50rpx;

        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #d13820;
          line-height: 34rpx;
        }
      }

      &-textarea {
        margin-top: 28rpx;

        textarea {
          padding: 0 32rpx;
          font-weight: 400;
          font-size: 28rpx;
          line-height: 40rpx;
          min-height: 200rpx;

          .placeholder {
            color: #cbcbcb;
          }
        }
      }
    }
  }

  &-bottom {
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
    z-index: 10;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 32rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);

    &-l {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #d13820;
      line-height: 50rpx;

      text {
        font-weight: 400;
        font-size: 20rpx;
        color: #3d3d3d;
        line-height: 28rpx;
      }
    }

    &-r {
      display: flex;
      align-items: center;

      view {
        padding: 0 32rpx;
        height: 72rpx;
        background: #ff5a60;
        border-radius: 8rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 72rpx;
      }
    }
  }
}
</style>
